Pimp My Message [5] – Masterpiece

Posted on by Enno Wulff

Related Post

Dies ist Teil 5 von 5 der Serie Nachrichten

Nachrichten

Zu Guter Letzt in der Serie Nachrichten anzeigen, wollte ich die Möglichkeiten, die W3CSS bietet so gut wie möglich ausnutzen. Die Überschriften des Langtextes sollen bei Bedarf aufgeklappt werden. Der Anwender hat so eine perfekte Übersicht über alle Bestandteile der Meldung und kann diese aufklappen.

Die aufgeklappten Bestandteile der Meldung sehen dann so aus:

Wie dir vielleicht aufgefallen ist, habe ich die einzelnen unterschiedlichen Absatzformate ebenfalls angepasst. Die Überschrift U2 wird ebenfalls farbig dargestellt und die Aufzählungen werden in einem grauen Rahmen dargestellt.

Absatzvielfalt

Für die Langtexte werden eine Vielzahl an Absatzformaten verwendet. Eine fehlerhafte Darstellung ist jedoch nicht schlimm, kann aber nach und nach in einer zentralen Umwandlungsfunktion angepasst werden.

Wenn man einmal weiß, wie Absatzformate besonders hervorgehoben werden können, lassen sich auch leicht eigene Absatzformate definieren, die dann eine besondere Farbe oder Darstellung bekommen.

Container

Die Darstellung der Meldung erfolgt in allen Beispielen in einem HTML-Container der in einer amodalen Dialogbox eingebettet ist. Dies habe ich gemacht, weil der Programmcode hierfür sehr einfach zu erzeugen ist. Wenn du eine eigene Darstellung bastelst, dann solltest du ein Dynpro verwenden. Hier kann der angepasste HTML-Texte angezeigt werden. Zusätzlich können aber auch entsprechende Icons oder Bilder dargestellt werden. Die Meldung kann auf diese Weise wirklich schick angezeigt werden und erregt so hoffentlich die Aufmerksamkeit des Anwenders.

Code

REPORT.

PARAMETERS p_msgno TYPE symsgno DEFAULT '313'.

CLASS lcl_info DEFINITION.
  PUBLIC SECTION.
    METHODS show.
    METHODS get_message_short RETURNING VALUE(rv_message) TYPE string.
    METHODS get_accordion_long RETURNING VALUE(rt_html) TYPE htmltable.
  PROTECTED SECTION.
    CLASS-METHODS build_box.
    CLASS-DATA mo_box TYPE REF TO cl_gui_dialogbox_container.
    CLASS-DATA mo_html TYPE REF TO cl_gui_html_viewer.
    DATA mv_short TYPE string.
    DATA mt_long  TYPE htmltable.
    CLASS-METHODS handle_close FOR EVENT close OF cl_gui_dialogbox_container.
    METHODS show_message.
ENDCLASS.

CLASS lcl_info IMPLEMENTATION.

  METHOD show.
    build_box( ).
    mv_short = get_message_short( ).
    mt_long  = get_accordion_long( ).
    show_message( ).
  ENDMETHOD.
  METHOD get_message_short.

    MESSAGE ID sy-msgid
          TYPE sy-msgty
        NUMBER sy-msgno
          WITH sy-msgv1 sy-msgv2 sy-msgv3 sy-msgv4
          INTO rv_message.
  ENDMETHOD.

  METHOD build_box.
    IF mo_box IS INITIAL.
      mo_box  = NEW #( width = 900 height = 400 top = 20 left = 400 ).
      mo_html = NEW #( parent = mo_box ).
      SET HANDLER handle_close FOR mo_box.
    ENDIF.
    mo_box->set_caption( sy-title ).
  ENDMETHOD.

  METHOD show_message.
    DATA lv_url TYPE c LENGTH 1000.
    mo_html->load_data( EXPORTING encoding = 'utf-8'
                        IMPORTING assigned_url = lv_url
                        CHANGING data_table = mt_long ).
    mo_html->show_data( url = lv_url ).
  ENDMETHOD.

  METHOD handle_close.
    mo_box->set_visible( space ).
  ENDMETHOD.


  METHOD get_accordion_long.

    DATA ls_header           TYPE thead.

    DATA lt_itf_text         TYPE STANDARD TABLE OF tline.
    DATA lt_html_text        TYPE STANDARD TABLE OF htmlline.

    DATA lv_object                 TYPE dokhl-object.


    CALL FUNCTION 'DOCU_OBJECT_NAME_CONCATENATE'
      EXPORTING
        docu_id  = 'NA'
        element  = sy-msgid
        addition = sy-msgno
      IMPORTING
        object   = lv_object.


    CALL FUNCTION 'DOCU_GET'
      EXPORTING
        id     = 'NA'
        langu  = sy-langu
        object = lv_object
      IMPORTING
        head   = ls_header
      TABLES
        line   = lt_itf_text
      EXCEPTIONS
        OTHERS = 5.

    DATA(lt_conv_parformats) = VALUE tline_t(
             ( tdformat = 'U1' tdline = '<h2><div class="w3-panel w3-blue">' )
             ( tdformat = 'U2' tdline = '<h3><div class="w3-panel w3-light-blue">' )
             ( tdformat = 'U3' tdline = '<h3><div class="w3-panel w3-sand">' )
             ( tdformat = 'AS' tdline = '<div class="w3-margin">' )
             ( tdformat = '*' tdline = '<div class="w3-margin">' )
             ( tdformat = 'PE' tdline = '<div class="w3-margin w3-light-grey">' )
             ( tdformat = 'B1' tdline = '<div class="w3-container w3-margin">' ) ).

    CALL FUNCTION 'CONVERT_ITF_TO_HTML'
      EXPORTING
        i_header          = ls_header
        i_html_header     = abap_false
      TABLES
        t_itf_text        = lt_itf_text
        t_html_text       = rt_html
        t_conv_parformats = lt_conv_parformats
      EXCEPTIONS
        OTHERS            = 4.

    DATA(lt_header) = VALUE htmltable(
             ( tdline = '<html><head>' )
             ( tdline = '<meta http-equiv="content-type" content="text/html; charset=utf-8">' )
             ( tdline = '<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">' )
             ( tdline = '<title>test</title></head><body>' )
             ( tdline = |<h1><div class="w3-panel w3-red">{ mv_short }</div></h1>| ) ).
    INSERT LINES OF lt_header INTO rt_html INDEX 1.

    DATA(lt_script) = VALUE htmltable(
             ( tdline = '    <script> ' )
             ( tdline = 'function myFunction(id) {' )
             ( tdline = '    var x = document.getElementById(id);' )
             ( tdline = '    if (x.className.indexOf("w3-show") == -1) {' )
             ( tdline = '        x.className += " w3-show";' )
             ( tdline = '    } else { ' )
             ( tdline = '        x.className = x.className.replace(" w3-show", "");' )
             ( tdline = '    }' )
             ( tdline = '}' )
             ( tdline = '</script>' )  ).
    APPEND LINES OF lt_script TO rt_html.

    DATA(lt_style) = VALUE htmltable(
                         ( tdline = '<style type="text/css">body { overflow: hidden; }</style>' ) ).

    APPEND LINES OF lt_style TO rt_html.

    APPEND '</body></html>' TO rt_html.

    DATA id TYPE n LENGTH 2.
    LOOP AT rt_html ASSIGNING FIELD-SYMBOL(<html>).
      IF <html>(4) = '<h2>'.
        IF id IS NOT INITIAL.
          APPEND '</div>' TO lt_html_text.
        ENDIF.
        ADD 1 TO id.
        APPEND |<button onclick="myFunction('{ id }')" class="w3-btn w3-block w3-light-blue w3-left-align">| TO lt_html_text.
        APPEND <html> TO lt_html_text.
        APPEND |</button>| TO lt_html_text.
        APPEND |<div id="{ id }" class="w3-container w3-hide">| TO lt_html_text.
      ELSE.
        APPEND <html> TO lt_html_text.
      ENDIF.
    ENDLOOP.

    rt_html = lt_html_text.

  ENDMETHOD.

ENDCLASS.

AT SELECTION-SCREEN.

  MESSAGE ID 'BRAIN'
         TYPE 'E'
        NUMBER p_msgno
         WITH 'EINS' 'ZWEI' 'DREI' 'VIER' INTO sy-title.
  NEW lcl_info( )->show( ) .

 

Enno Wulff
Letzte Artikel von Enno Wulff (Alle anzeigen)
Series Navigation<< Pimp My Message [4] – W3CSS